---
type: tutorial
title: Envoyez votre premier script au navigateur
description: >-
  Tutoriel : Construisez votre premier blog Astro —

  Ajoutez de l'interactivité côté client à votre navigation mobile avec 
  une balise de script Astro
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ajoutons un menu hamburger pour ouvrir et fermer vos liens sur les écrans de taille mobile, nécessitant ainsi de l'interactivité côté client !

<PreCheck>
  - Créez un composant de menu hamburger
  - Rédigez un `<script>` pour permettre à vos visiteurs de site d'ouvrir et de fermer le menu de navigation
  - Déplacez votre JavaScript dans son fichier `.js`
</PreCheck>

## Construire un composant Hamburger

Créez un composant `<Hamburger />` pour ouvrir et fermer votre menu mobile.

<Steps>
1. Créez un fichier nommé `Hamburger.astro` dans `src/components/`
  

2. Copiez le code suivant dans votre composant. Cela représentera votre menu "hamburger" à 3 lignes pour ouvrir et fermer vos liens de navigation sur mobile. (Vous ajouterez les nouveaux styles CSS à `global.css` ultérieurement.)

    ```astro title="src/components/Hamburger.astro"
    --- 
    ---
    <div class="hamburger">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
    ```

3. Placez ce nouveau composant `<Hamburger />` juste avant votre composant `<Navigation />` dans `Header.astro`. 

    <details>
    <summary>Montrez-moi le code !</summary>
    
    ```astro title="src/components/Header.astro" ins={2,7}
    ---
    import Hamburger from './Hamburger.astro';
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Hamburger />
        <Navigation />
      </nav>
    </header>
    ```
    </details>

4. Ajoutez les styles suivants pour votre composant Hamburger :

    ```css title="src/styles/global.css" ins={2-13, 56-58}
    /* Styles de la navigation */
    .hamburger {
      padding-right: 20px;
      cursor: pointer;
    }
  
    .hamburger .line {
      display: block;
      width: 40px;
      height: 5px;
      margin-bottom: 10px;
      background-color: #ff9776;
    }
  
    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }
  
    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }
  
    .nav-links a:hover, a:focus {
      background-color: #ff9776;
    }
  
    .expanded {
      display: unset;
    }
  
    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }
  
      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
  
      .hamburger {
        display: none;
      }
    }
    ```
</Steps>


## Rédigez votre première balise de script

Votre en-tête n'est pas encore **interactif** car il ne peut pas réagir aux interactions de l'utilisateur, comme cliquer sur le menu hamburger pour afficher ou masquer les liens de navigation. 

L'ajout d'une balise `<script>` fournit du JavaScript côté client pour "écouter" un événement utilisateur, puis réagir en conséquence.

<Steps>
1. Ajoutez la balise `<script>` suivante à `index.astro`, juste avant la balise de fermeture `</body>`.

    ```astro title="src/pages/index.astro" ins={2-6}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });
      </script>
    </body>
    ```

2. Vérifiez à nouveau votre aperçu de navigateur à différentes tailles, et vérifiez que vous avez un menu de navigation fonctionnel qui est à la fois réactif à la taille de l'écran et réagit aux interactions de l'utilisateur sur cette page.
</Steps>

### Importation d'un fichier `.js`

Au lieu d'écrire votre JavaScript directement sur chaque page, vous pouvez déplacer le contenu de votre balise `<script>` dans son propre fichier `.js` dans votre projet.

<Steps>
1. Créez `src/scripts/menu.js` (vous devrez créer un nouveau dossier `/scripts/`) et déplacez-y votre JavaScript.

    ```js title="src/scripts/menu.js"
    document.querySelector('.hamburger').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
    ```

2. Remplacez le contenu de la balise `<script>` sur `index.astro` par l'importation de fichier suivante :

    ```astro title="src/pages/index.astro" ins={7} del={3-5}
      <Footer />
      <script>
        document.querySelector('.hamburger').addEventListener('click', () => {
          document.querySelector('.nav-links').classList.toggle('expanded');
        });

        import "../scripts/menu.js";
      </script>
    </body>
    ```

3. Vérifiez à nouveau votre aperçu de navigateur à une taille plus petite et vérifiez que le menu hamburger ouvre toujours et ferme vos liens de navigation. 


4. Ajoutez la même balise `<script>` avec l'importation sur vos deux autres pages, `about.astro` et `blog.astro`, et vérifiez que vous avez un en-tête réactif et interactif sur chaque page.

    ```astro title="src/pages/about.astro & src/pages/blog.astro" ins={2-4}
      <Footer />
      <script>
        import "../scripts/menu.js";
      </script>
    </body>
    ```
</Steps>

:::note[Conclusion]
Vous aviez précédemment utilisé un peu de JavaScript pour construire des parties de votre site :

- Définir le titre de votre page et l'en-tête dynamiquement
- Parcourir une liste de compétences sur la page "À propos"
- Afficher conditionnellement des éléments HTML

Ces commandes sont toutes exécutées au moment de la construction pour créer du HTML statique pour votre site, puis le code est "jeté". 

**Le JavaScript dans une balise `<script>` est envoyé au navigateur**, et est disponible pour s'exécuter, en fonction des interactions de l'utilisateur, comme le rafraîchissement d'une page ou la bascule d'une entrée.
:::



<Box icon="question-mark">

### Testez vos connaissances

1. Quand Astro exécute-t-il tout JavaScript écrit dans la frontmatter d'un composant ?
    <MultipleChoice>
      <Option>
       Astro n'exécute jamais de JavaScript
      </Option>
      <Option isCorrect>
        au moment de la construction (build-time)
      </Option>
      <Option>
         Lorsqu'un visiteur clique sur un bouton
      </Option>
    </MultipleChoice>

2. En option, Astro peut envoyer du JavaScript au navigateur pour permettre :
    <MultipleChoice>
      <Option>
        aux utilisateurs de cliquer sur des liens de page
      </Option>
      <Option>
        des temps de chargement plus rapides
      </Option>
      <Option isCorrect>
        de l'interactivité côté client
      </Option>
    </MultipleChoice>

3. Le JavaScript côté client sera envoyé au navigateur d'un utilisateur quand il est écrit ou importé :
    <MultipleChoice>
      <Option isCorrect>
        dans des balises `<script>`
      </Option>
      <Option>
        entre les clôtures de code d'un fichier `.astro`
      </Option>
      <Option>
        dans `global.css`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux ajouter de l'interactivité côté client avec du JavaScript dans une balise `<script>`.
- [ ] Je peux importer un fichier `.js` dans une balise `<script>`.
</Checklist>

</Box>

### Ressources

[Scripts côté client dans Astro](/fr/guides/client-side-scripts/)
